<script setup lang="ts">
import FinanciaTable from '@/components/Echart/Table/FinanciaTable.vue'
import { reactive, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useFinanceStore } from '@/stores/module/finance'
const FinanceStore = useFinanceStore() // 创建store实例
const { getTopFiveCountryRankingOne } = storeToRefs(FinanceStore)
const tableHeadData = reactive(getTopFiveCountryRankingOne.value.tableHeadData)
const tableBodyData = reactive(getTopFiveCountryRankingOne.value.tableBodyData)
watch(
  () => getTopFiveCountryRankingOne.value,
  () => {
    tableHeadData.splice(
      0,
      tableHeadData.length,
      ...getTopFiveCountryRankingOne.value.tableHeadData
    )
    tableBodyData.splice(
      0,
      tableBodyData.length,
      ...getTopFiveCountryRankingOne.value.tableBodyData
    )
  },
  { deep: true }
)
</script>
<template>
  <card-box>
    <template v-slot:title v-if="getTopFiveCountryRankingOne.title">
      <h1>{{ getTopFiveCountryRankingOne.title }}</h1>
    </template>
    <FinanciaTable
      :table-head-data="tableHeadData"
      :table-body-data="tableBodyData"
      v-if="
        getTopFiveCountryRankingOne.tableBodyData.length &&
        getTopFiveCountryRankingOne.tableHeadData.length
      "
    />
    <div v-else class="default-img">
      <p>{{ $t('bi_common_nodata') }}</p>
    </div>
  </card-box>
</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
</style>
